<template >
    <div>
        <h1>当前求和{{he}}</h1>
        <h2>当前求和乘以10倍{{bigSum}}</h2>
        <h3>我在{{xuexiao}}学{{xueke}}</h3>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="add">+</button>
        <button @click="sub">-</button>
        <button @click="addOdd">当前求和为奇数时再加</button>
        <button @click="addWait">等一等再加</button>
    </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
    name:'Count',
    data() {
        return {
            n:1
        }
    },
    methods: {
        add(){
            //actions里没有逻辑的可以直接和mutations对话
            this.$store.commit('JIA',this.n)
        },
        sub(){
            //actions里没有逻辑的可以直接和mutations对话
            this.$store.commit('JIAN',this.n)
        },
        addOdd(){
            this.$store.dispatch('jiaOdd',this.n)
        },
        addWait(){
            this.$store.dispatch('jiaWait',this.n)
        }
    },
    computed:{
        //靠程序员自己写计算属性
        /* he(){
            return this.$store.state.sum
        },
        xuexiao(){
            return this.$store.state.school
        },
        xueke(){
            return this.$store.state.subject
        },
        */

        //点点点  解构写法
        //借助mapState生成计算属性，从state中读取数据
        ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),
        //借助mapState生成计算属性，从state中读取数据,数组写法
        ...mapState(['sum','school','subject']),




        /* ****************************************************************** */
        /* bigSum(){
            return this.$store.getters.bigSum
        } */ 
        //借助mapGeetters生成计算属性，从getters中读取数据，   对象写法
        // ...mapGetters({'bigSum':'bigSum'})
        //借助mapGeetters生成计算属性，从getters中读取数据，   数组写法
        ...mapGetters(['bigSum'])

    },
    mounted(){
        const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
        console.log(x)
    }
}
</script>
<style lang="css">
    button{
        margin-left: 5px;
    }
</style>